* {
  list-style: none;
}
html,
body {
  width: 100%;
  height: 100%;
}
.box {
  width: 400px;
  height: 300px;
  background: linear-gradient(135deg, transparent 15px, #00f 0),
    linear-gradient(-135deg, transparent 15px, #00f 0),
    linear-gradient(45deg, transparent 15px, #00f 0),
    linear-gradient(-45deg, transparent 15px, #00f 0);
  background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-position: top left, top right, bottom left, bottom right,
    bottom right;
  background-repeat: no-repeat;
}
.hot {
  width: 300px;
  height: 300px;
  background: linear-gradient(70deg, rgb(21, 255, 0) 10px, transparent 50px);
  background-size: 20% 20%;
}
.box1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    #fff,
    #f00,
    orange,
    yellow,
    #0f0,
    skyblue,
    #00f,
    purple
  );
  background-size: 200% 200%;
}
#page {
  display: flex;
}
